
/** 
  会议资助额度限制
*/
<template>
    <div>
        <span style="line-height:40px;font-weight:bold">
            <!-- 会议资助额度限制 -->
            <h3>{{$t('conferFundingLimit.conferFunding')}}</h3>
        </span>
        <el-form
            ref="ruleTable"
            :model="ruleTable"
            :rules="rulesForm"
            class="meetting-funding-form"
        >
            <el-table
                :data="ruleTable.tableData"
                style="width: 100%; "
                :span-method="objectSpanMethod"
                tooltip-effect="light"
                stripe
                fit
                :cell-class-name="tableRowClassName"
            >
            <!-- 会议举办地区 -->
                <el-table-column :label="$t('conferFundingLimit.conferenceArea')" prop="conferenceArea" width="200"></el-table-column>
                <!-- 可用于报销内容 -->
                <el-table-column
                    :label="$t('conferFundingLimit.reimburseContent')"
                    prop="reimburseContent"
                    width="260"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <el-form-item
                            :rules="rulesForm.reimburseContent"
                            :prop="'tableData.' + scope.$index + '.reimburseContent'"
                        >
                            <el-input
                                placeholder=""
                                v-show="!scope.row.ifshow"
                                v-model="scope.row.reimburseContent"
                                maxlength="128"
                                style="width: 100%;"
                                type="textarea"
                                :rows="4"
                            ></el-input>

                            <div v-show="scope.row.ifshow">{{scope.row.reimburseContent}}</div>
                            <div>
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="editReimburseContent(scope.$index, scope.row)"
                                    v-if="scope.row.ifshow"
                                >{{$t('base.editMenu')}}</el-button>
                                <!-- 编辑 -->
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="saveReimburseContent(scope.$index, scope.row)"
                                    v-if="!scope.row.ifshow"
                                >{{$t('base.onsubmit')}}</el-button>
                                <!-- 保存 -->
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="cancelReimburseContent(scope.$index, scope.row)"
                                    v-if="!scope.row.ifshow"
                                >{{$t('base.cancel')}}</el-button>
                                <!-- 取消 -->
                            </div>
                        </el-form-item>
                    </template>
                </el-table-column>
                <!-- 顶级会议（万元/人） -->
                <el-table-column :label="$t('conferFundingLimit.topMeetingCount')">
                    <!-- 宣读 -->
                    <el-table-column
                        :label="$t('conferFundingLimit.conferenceReadTop')"
                        prop="conferenceReadTop"
                        show-overflow-tooltip
                        width="150"
                    >
                        <template slot-scope="scope">
                            <el-form-item
                                :rules="rulesForm.conferenceReadTop"
                                :prop="'tableData.' + scope.$index + '.conferenceReadTop'"
                            >
                                <el-input
                                    placeholder=""
                                    v-show="scope.row.show"
                                    v-model="scope.row.conferenceReadTop"
                                    maxlength="10"
                                ></el-input>
                            </el-form-item>
                            <span v-show="!scope.row.show">{{scope.row.conferenceReadTop}}</span>
                        </template>
                    </el-table-column>
                    <!-- 海报 -->
                    <el-table-column :label="$t('conferFundingLimit.conferencePosterTop')" prop="conferencePosterTop" width="150">
                        <template slot-scope="scope">
                            <el-form-item
                                :rules="rulesForm.conferencePosterTop"
                                :prop="'tableData.' + scope.$index + '.conferencePosterTop'"
                            >
                                <el-input
                                    placeholder=""
                                    v-show="scope.row.show"
                                    v-model="scope.row.conferencePosterTop"
                                    maxlength="10"
                                ></el-input>
                            </el-form-item>
                            <span v-show="!scope.row.show">{{scope.row.conferencePosterTop}}</span>
                        </template>
                    </el-table-column>
                </el-table-column>
                <!-- A类会议（万元/人） -->
                <el-table-column :label="$t('conferFundingLimit.meetingA')">
                    <!-- 宣读 -->
                    <el-table-column :label="$t('conferFundingLimit.conferenceReadTop')" prop="conferenceReadA" width="150">
                        <template slot-scope="scope">
                            <el-form-item
                                :rules="rulesForm.conferenceReadA"
                                :prop="'tableData.' + scope.$index + '.conferenceReadA'"
                            >
                                <el-input
                                    placeholder=""
                                    v-show="scope.row.show"
                                    v-model="scope.row.conferenceReadA"
                                    maxlength="10"
                                ></el-input>
                            </el-form-item>
                            <span v-show="!scope.row.show">{{scope.row.conferenceReadA}}</span>
                        </template>
                    </el-table-column>
                    <!-- 海报 -->
                    <el-table-column :label="$t('conferFundingLimit.conferencePosterTop')" prop="conferencePosterA" width="150">
                        <template slot-scope="scope">
                            <el-form-item
                                :rules="rulesForm.conferencePosterA"
                                :prop="'tableData.' + scope.$index + '.conferencePosterA'"
                            >
                                <el-input
                                    placeholder=""
                                    v-show="scope.row.show"
                                    v-model="scope.row.conferencePosterA"
                                    maxlength="10"
                                ></el-input>
                            </el-form-item>
                            <span v-show="!scope.row.show">{{scope.row.conferencePosterA}}</span>
                        </template>
                    </el-table-column>
                </el-table-column>
                <!-- B类会议（万元/人） -->
                <el-table-column :label="$t('conferFundingLimit.meetingB')">
                    <!-- 宣读 -->
                    <el-table-column :label="$t('conferFundingLimit.conferenceReadTop')" prop="conferenceReadB" width="200">
                        <template slot-scope="scope">
                            <el-form-item
                                :rules="rulesForm.conferenceReadB"
                                :prop="'tableData.' + scope.$index + '.conferenceReadB'"
                            >
                                <el-input
                                    placeholder=""
                                    v-show="scope.row.show"
                                    v-model="scope.row.conferenceReadB"
                                    maxlength="10"
                                ></el-input>
                            </el-form-item>
                            <span v-show="!scope.row.show">{{scope.row.conferenceReadB}}</span>
                        </template>
                    </el-table-column>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column :label="$t('base.operate')" fixed="right" min-width="180px">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.$index, scope.row)"
                            v-if="scope.row.ifEdit"
                        >{{$t('base.editMenu')}}</el-button>
                        <!-- 编辑 -->
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleSave(scope.$index, scope.row)"
                            v-if="!scope.row.ifEdit"
                        >{{$t('base.onsubmit')}}</el-button>
                        <!-- 保存 -->
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleCancel(scope.$index, scope.row)"
                            v-if="!scope.row.ifEdit"
                        >{{$t('base.cancel')}}</el-button>
                        <!-- 取消 -->
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
    </div>
</template>

<script>
import interAcaConferenceApi from 'common/src/api/internationalCommunication/interAcaConference'
export default {
    data() {
        var checkNumber = (rule, value, callback) => {
            var regex = /^\d+(\.{0,1}\d+){0,1}$/
            if (regex.test(value) || value === '' || value === null || value === undefined) {
                callback()
            } else {
                callback(new Error('请输入非负数'))
            }
        }
        var checkFloat = (rule, value, callback) => {
            var regex = /^[+]?\d*\.?\d{0,1}$/
            if (regex.test(value) || value === '' || value === null || value === undefined) {
                callback()
            } else {
                callback(new Error('请保留1位小数'))
            }
        }
        return {
            ruleTable: {
                tableData: []
            },
            // ifshow: true,
            rulesForm: {
                conferenceReadTop: [
                    { validator: checkNumber, trigger: 'blur' },
                    { validator: checkFloat, trigger: 'blur' }
                ],
                conferencePosterTop: [
                    { validator: checkNumber, trigger: 'blur' },
                    { validator: checkFloat, trigger: 'blur' }
                ],
                conferenceReadA: [
                    { validator: checkNumber, trigger: 'blur' },
                    { validator: checkFloat, trigger: 'blur' }
                ],
                conferencePosterA: [
                    { validator: checkNumber, trigger: 'blur' },
                    { validator: checkFloat, trigger: 'blur' }
                ],
                conferenceReadB: [
                    { validator: checkNumber, trigger: 'blur' },
                    { validator: checkFloat, trigger: 'blur' }
                ],
                reimburseContent: [{ required: true, message: '请填写', trigger: 'blur' }]
            }
        }
    },

    created() {
        interAcaConferenceApi.getFundList().then(res => {
            res.data.forEach(FundList => {
                FundList.ifshow = true
                FundList.show = false
                FundList.ifEdit = true
                this.ruleTable.tableData.push(FundList)
            })
        })
    },
    methods: {
        // 打开修改，表格变成可编辑状态
        handleEdit(index, row) {
            row.show = true
            row.ifEdit = false
        },
        editReimburseContent(index,row) {
            row.ifshow = false
        },

        // 保存修改
        handleSave(index, row) {
            let params = {
                id: row.id,
                conferenceReadTop: row.conferenceReadTop,
                conferencePosterTop: row.conferencePosterTop,
                conferenceReadA: row.conferenceReadA,
                conferencePosterA: row.conferencePosterA,
                conferenceReadB: row.conferenceReadB
            }

            let validList = [
                'tableData.' + index + '.conferenceReadTop',
                'tableData.' + index + '.conferencePosterTop',
                'tableData.' + index + '.conferenceReadA',
                'tableData.' + index + '.conferencePosterA',
                'tableData.' + index + '.conferenceReadB'
            ]

            let _this = this
            Promise.all(
                validList.map(item => {
                    let p = new Promise(function(resolve, reject) {
                        _this.$refs['ruleTable'].validateField(item, error => {
                            resolve(error)
                        })
                    })
                    return p
                })
            ).then(data => {
                // 判断data 里是否全是空串
                // 去除数组空值
                data = data.filter(item => item)
                if (!data.length) {
                    interAcaConferenceApi.updateFundById(params).then(res => {
                        if (res.code === 200) {
                            row.show = false
                            row.ifEdit = true
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            })
                        }
                    })
                } else {
                    this.$message.error('请按要求填写')
                }
            })
        },
        // reimburseContent保存修改
        saveReimburseContent(index, row) {
            let params = {
                reimburseContent: row.reimburseContent,
                ids: ''
                }
            if(row.id < 4) {
               params.ids = "1,2,3"
            } else {
               params.ids = "4"
            }

            let validList = ['tableData.' + index + '.reimburseContent']

            let _this = this
            Promise.all(
                validList.map(item => {
                    let p = new Promise(function(resolve, reject) {
                        _this.$refs['ruleTable'].validateField(item, error => {
                            resolve(error)
                        })
                    })
                    return p
                })
            ).then(data => {
                // 判断data 里是否全是空串
                // 去除数组空值
                data = data.filter(item => item)
                if (!data.length) {
                    interAcaConferenceApi.updateFundContentById(params).then(res => {
                        if (res.code === 200) {
                            row.ifshow = true
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            })
                        }
                    })
                } else {
                    this.$message.error('请按要求填写')
                }
            })
        },
        // 取消修改
        handleCancel(index, row) {
            let _this = this
            this.$confirm('您确定要取消修改吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$refs['ruleTable'].clearValidate()
                interAcaConferenceApi.getFundList().then(res => {
                    res.data.forEach(FundList => {
                        if (FundList.id === row.id) {
                            FundList.show = false
                            FundList.ifEdit = true
                            FundList.reimburseContent = row.reimburseContent
                            this.$set(_this.ruleTable.tableData, index, FundList)
                        }
                    })
                })
            })
        },
        // ReimburseContent取消修改
        cancelReimburseContent(index, row) {
            let _this = this
            this.$confirm('您确定要取消修改吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$refs['ruleTable'].clearValidate()
                interAcaConferenceApi.getFundList().then(res => {
                    row.ifshow = true
                    row.reimburseContent = res.data[index].reimburseContent
                })
            })
        },

        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1) {
                if (rowIndex === 0) {
                    return {
                        rowspan: 3,
                        colspan: 1
                    }
                } else if (rowIndex === 3) {
                    return {
                        rowspan: 1,
                        colspan: 1
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 1
                    }
                }
            }  
        },
        tableRowClassName({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1) {
                return 'changeStyle'
            } else {
                return ''
            }
        }
    }
}
</script>

<style lang="scss">
.meetting-funding-form {
    .changeStyle {
        .cell {
            white-space: pre-wrap !important;
            overflow: visible;
        }
    }
}
</style>